---
type: tutorial
title: Créer et transmettre des données à une mise en page de blog personnalisée
description: >-
  Tutoriel : Créer votre premier blog avec Astro —

  Créez une mise en page d'article de blog pour vos fichiers Markdown et
  transmettez-lui les valeurs du frontmatter en tant que props
i18nReady: true
---
import Box from '~/components/tutorial/Box.astro';
import Checklist from '~/components/Checklist.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';
import Badge from "~/components/Badge.astro"

Maintenant que vous avez une mise en page pour vos pages, il est temps d'ajouter une mise en page pour les articles de blog !

<PreCheck>
  - Créer une nouvelle mise en page d'article de blog pour vos fichiers Markdown
  - Transmettre les valeurs YAML du frontmatter en tant que props au composant de mise en page
</PreCheck>

## Ajouter une mise en page à vos articles de blog

Lorsque vous incluez la propriété `layout` dans le frontmatter d'un fichier `.md`, toutes les valeurs YAML du frontmatter sont disponibles dans le fichier de mise en page.

<Steps>
1. Créez un nouveau fichier à l'emplacement `src/layouts/MarkdownPostLayout.astro`

2. Copiez le code suivant dans `MarkdownPostLayout.astro`

    ```astro title="src/layouts/MarkdownPostLayout.astro"
    ---
    const { frontmatter } = Astro.props;
    ---
    <meta charset="utf-8" />
    <h1>{frontmatter.title}</h1>
    <p>Écrit par : {frontmatter.author}</p>
    <slot />
    ```

3. Ajoutez la propriété de frontmatter suivante dans `post-1.md`

    ```markdown title="src/pages/posts/post-1.md" ins={2}
    ---
    layout: ../../layouts/MarkdownPostLayout.astro
    title: 'Mon premier article de blog'
    pubDate: 2022-07-01
    description: 'Ceci est le premier article de mon nouveau blog Astro.'
    author: 'Apprenti Astro'
    image:
        url: 'https://docs.astro.build/assets/rose.webp' 
        alt: 'Le logo Astro sur un fond sombre avec une lueur rose.'
    tags: ["astro", "blogging", "apprentissage en public"]
    ---
    ```

4. Vérifiez à nouveau l'aperçu dans votre navigateur à l'adresse `http://localhost:4321/posts/post-1` et observez ce que la mise en page a ajouté à votre page. 

5. Ajoutez la même propriété de mise en page à vos deux autres articles de blog, `post-2.md` et `post-3.md`. Vérifiez dans votre navigateur que votre mise en page est également appliquée à ces articles.
</Steps>

:::tip
Lors de l'utilisation de mises en page, vous avez désormais la possibilité d'inclure des éléments, tels qu'un titre de page, dans le contenu Markdown ou dans la mise en page. N'oubliez pas d'inspecter visuellement l'aperçu de votre page et d'apporter les ajustements nécessaires pour éviter les éléments en double. 
:::

<Box icon="puzzle-piece">

## Essayer par vous-même - Personnaliser la mise en page de votre article de blog

**Défi** : Identifiez les éléments communs à chaque article de blog et utilisez `MarkdownPostLayout.astro` pour les afficher, au lieu de les écrire dans le contenu Markdown de votre fichier `post-1.md` et dans tous les futurs articles de blog.

Voici un exemple de refonte de votre code pour inclure la date de publication (`pubDate`) dans le composant de mise en page au lieu de l'écrire dans le corps de votre Markdown :

```markdown title="src/pages/posts/post-1.md" del={1}
Publié le : 2022-07-01

Bienvenue sur mon _nouveau blog_ sur l'apprentissage d'Astro ! Ici, je partagerai mon parcours d'apprentissage alors que je construis un nouveau site web.
```

```astro title="src/layouts/MarkdownPostLayout.astro" ins={6}
---
const { frontmatter } = Astro.props;
---
<meta charset="utf-8" />
<h1>{frontmatter.title}</h1>
<p>Publié le : {frontmatter.pubDate.toString().slice(0,10)}</p>
<p>Écrit par : {frontmatter.author}</p>
<slot />
```

Refactorisez autant que vous le jugez utile et ajoutez autant d'éléments à votre mise en page que vous le souhaitez, en vous souvenant que tout ce que vous ajoutez à votre mise en page représente une tâche de moins à effectuer dans chaque article de blog !

Voici un exemple de mise en page refaçonnée qui ne laisse que le contenu de l'article de blog individuel rendu par le slot. N'hésitez pas à l'utiliser ou à créer le vôtre !

```astro title="src/layouts/MarkdownPostLayout.astro"
---
const { frontmatter } = Astro.props;
---
<meta charset="utf-8" />
<h1>{frontmatter.title}</h1>
<p>{frontmatter.pubDate.toString().slice(0,10)}</p>
<p><em>{frontmatter.description}</em></p>
<p>Écrit par : {frontmatter.author}</p>
<img src={frontmatter.image.url} width="300" alt={frontmatter.image.alt} />
<slot />
```
</Box>

:::note[Éviter les doublons]
Tout ce qui est rendu par votre mise en page n'a **pas** besoin d'être saisi dans votre article de blog ! Si vous constatez des doublons lors de l'aperçu dans votre navigateur, veillez à supprimer le contenu dans votre fichier Markdown.
 :::

 

<Box icon="question-mark">

### Tester vos connaissances
Pouvez-vous trouver ce qui doit aller dans les blancs pour que les deux composants suivants produisent ensemble un code Astro fonctionnel ?

1.  ```markdown title="src/pages/posts/learning-astro.md"
    ---
    layout: ../../__________/MyMarkdownLayout.astro
    title: "Découverte de Markdown dans Astro"
    author: Apprenti Astro
    ____: 2022-08-08
    ---
    J'ai tellement appris aujourd'hui ! Astro me permet d'écrire en Markdown, mais aussi d'utiliser les variables du frontmatter. Je peux même accéder à ces valeurs dans un composant de mise en page Astro.
    ```

2.  ```astro title="src/layouts/MyMarkdownLayout.astro"
    ---
    import ____________ from '../components/Footer.astro'
    const { ___________ } = Astro.props
    ---
    <h1>{frontmatter.title}</h1>
    <p>Écrit par : {frontmatter.______} le {frontmatter.pubDate}</p>
    < _______ />
    <Footer />
    ```
    <details>
        <summary>Afficher les blancs remplis !</summary>

        1.  ```markdown title="src/pages/posts/learning-astro.md" "layouts" "pubDate"
            ---
            layout: ../../layouts/MyMarkdownLayout.astro
            title: "Découverte de Markdown dans Astro"
            author: Apprenti Astro
            pubDate: 2022-08-08
            ---
            J'ai tellement appris aujourd'hui ! Astro me permet d'écrire en Markdown, mais aussi d'utiliser les variables du frontmatter. Je peux même accéder à ces valeurs dans un composant de mise en page Astro.
            ```

        2.  ```astro title="src/layouts/MyMarkdownLayout.astro" " Footer " " frontmatter " "author" "slot"
            ---
            import Footer from '../components/Footer.astro'
            const { frontmatter } = Astro.props
            ---
            <h1>{frontmatter.title}</h1>
            <p>Écrit par : {frontmatter.author} le {frontmatter.pubDate}</p>
            <slot />
            <Footer />
            ```
    </details>
</Box>

<Box icon="check-list">

## Liste de contrôle

<Checklist>
- [ ] Je peux ajouter une propriété de mise en page à un article de blog Markdown dans son frontmatter YAML.
- [ ] Je peux créer une mise en page distincte pour les articles de blog Markdown.
- [ ] Je peux utiliser les valeurs du frontmatter d'un article de blog dans un composant de mise en page.
</Checklist>

</Box>

### Ressources

- [Mises en page Markdown dans Astro](/fr/guides/markdown-content/#propriété-layout-du-frontmatter)

- [Props de mise en page Markdown](/fr/basics/layouts/#props-de-mise-en-page-markdown)

- [Introduction à YAML](https://dev.to/paulasantamaria/introduction-to-yaml-125f) (Anglais) <Badge class="neutral-badge" text="externe" />
